<template>
  <div class="join-club-view">
    <h2>加入社团</h2>
    <div class="join-club-content">
      <div class="club-filter">
        <input type="text" placeholder="搜索社团" v-model="searchKeyword">
        <select v-model="filterType">
          <option value="all">所有类型</option>
          <option value="academic">学术类</option>
          <option value="sports">体育类</option>
          <option value="arts">艺术类</option>
          <option value="tech">科技类</option>
        </select>
      </div>
      <div class="club-list">
        <div class="club-item" v-for="club in filteredClubs" :key="club.id">
          <div class="club-info">
            <h3>{{ club.name }}</h3>
            <p class="club-type">{{ club.type }}</p>
            <p class="club-description">{{ club.description }}</p>
            <p class="club-member-count">成员: {{ club.memberCount }}</p>
          </div>
          <button class="join-btn">加入社团</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 模拟社团数据
const clubs = ref([
  { id: 1, name: '编程社团', type: 'tech', description: '学习各种编程语言和技术', memberCount: 120 },
  { id: 2, name: '篮球社团', type: 'sports', description: '热爱篮球运动，组织各类比赛', memberCount: 80 },
  { id: 3, name: '书法社团', type: 'arts', description: '传承中华书法文化', memberCount: 50 },
  { id: 4, name: '数学建模社团', type: 'academic', description: '参加数学建模竞赛，提升建模能力', memberCount: 60 },
  { id: 5, name: '音乐社团', type: 'arts', description: '喜欢音乐的同学聚集在一起', memberCount: 70 },
  { id: 6, name: '机器人社团', type: 'tech', description: '学习机器人技术和编程', memberCount: 45 },
])

const searchKeyword = ref('')
const filterType = ref('all')

const filteredClubs = computed(() => {
  return clubs.value.filter(club => {
    const matchesSearch = club.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
                         club.description.toLowerCase().includes(searchKeyword.value.toLowerCase())
    const matchesType = filterType.value === 'all' || club.type === filterType.value
    return matchesSearch && matchesType
  })
})
</script>

<style scoped>
.join-club-view {
  width: 100%;
  height: 100%;
}

.join-club-content {
  padding: 24px;
}

.club-filter {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.club-filter input,
.club-filter select {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.club-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.club-item {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.club-info h3 {
  margin-bottom: 8px;
  color: #333;
}

.club-type {
  display: inline-block;
  background-color: #e6f7ff;
  color: #1890ff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 8px;
}

.club-description {
  margin-bottom: 8px;
  color: #666;
  line-height: 1.4;
}

.club-member-count {
  color: #999;
  font-size: 14px;
  margin-bottom: 16px;
}

.join-btn {
  padding: 8px 16px;
  background-color: #52c41a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  align-self: flex-start;
}

.join-btn:hover {
  background-color: #73d13d;
}
</style>